<script lang="ts" setup>
import { onMounted, ref, reactive, watch } from 'vue';
import CardItem from '../../cardItem.vue';
import _ from 'lodash';
import API from '@/services';
import EmptyData from '@/components/emptyData/index.vue';

// 获取api
const {
  board: { getPageable }
} = API;
const searchValue = ref('');
const listLoading = ref(false);
const myAuthList = ref<defs.BoardVO[]>();
const totalNum = ref(0);
const pageNum = ref(1);
const pageSize = ref(12);
const pageSizeOptions = [12, 24, 36, 48, 60];
const minPage = 12;

// 搜索过滤
const handleFilteDimension = () => {
  fetchDashboardList();
};

// 点击分页
const changePageNum = (page: number) => {
  pageNum.value = page;
  fetchDashboardList();
};

// 点击数据条数
const changePageSize = (pageSizeNum: number) => {
  pageSize.value = pageSizeNum;
  fetchDashboardList();
};

// 更新列表
const updateList = () => {
  fetchDashboardList();
};

// 获取指标看板列表
const fetchDashboardList = async () => {
  listLoading.value = true;
  const param = {
    name: searchValue.value, // 看板名称
    reviewType: 3, // 1: 公共看板 2:我创建的 3：获得授权的
    pageNum: pageNum.value, // 页数
    pageSize: pageSize.value, // 条数
    type: 2 // 看板类型 1：指标 2：指标树
  };
  try {
    const { code, data }: any = await getPageable({ ...param });
    if (code === 200) {
      myAuthList.value = data.list;
      totalNum.value = data.total;
    }
  } catch (error) {
    console.log(error);
  } finally {
    listLoading.value = false;
  }
};

onMounted(() => {
  fetchDashboardList();
});
</script>

<template>
  <div class="get-auth">
    <div class="get-auth-search">
      <a-input-search
        :style="{ width: '100%' }"
        placeholder="请输入"
        v-model="searchValue"
        allow-clear
        @search="
          () => {
            handleFilteDimension();
          }
        "
        @pressEnter="
          () => {
            handleFilteDimension();
          }
        "
        @clear="
          () => {
            handleFilteDimension();
          }
        "
      />
    </div>
    <div class="index-card-wrap" v-loading="listLoading">
      <div class="card-list" v-if="myAuthList?.length">
        <card-item
          :list="myAuthList"
          @update-list="updateList"
          fromWho="tree"
        ></card-item>
      </div>
      <EmptyData v-else></EmptyData>
      <div class="pagination-wrap" v-if="totalNum > minPage">
        <a-pagination
          show-page-size
          :total="totalNum"
          @change="changePageNum"
          @page-size-change="changePageSize"
          :default-page-size="pageSizeOptions[0]"
          :page-size-options="pageSizeOptions"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
